import React from 'react';
import '../../styles/MarketPerformancePage.css';

const MarketPerformancePage = () => {
  return (
    <div className="market-performance-page">
      <h2>今日市场表现</h2>
      
      <div className="performance-grid">
        {/* 指数与情绪分析 */}
        <div className="performance-card">
          <h3>指数与情绪分析</h3>
          <div className="card-content">
            <div className="index-section">
              <h4>主要指数</h4>
              <div className="index-list">
                <div className="index-item">
                  <span>上证指数</span>
                  <span className="up">+1.23%</span>
                </div>
                <div className="index-item">
                  <span>深证成指</span>
                  <span className="up">+0.87%</span>
                </div>
                <div className="index-item">
                  <span>创业板指</span>
                  <span className="down">-0.15%</span>
                </div>
              </div>
            </div>
            <div className="sentiment-section">
              <h4>市场情绪</h4>
              <div className="sentiment-meter">
                <div className="meter-bar" style={{ width: '65%' }}></div>
                <span>65% 看涨</span>
              </div>
            </div>
          </div>
        </div>

        {/* 政策与消息 */}
        <div className="performance-card">
          <h3>政策与消息</h3>
          <div className="card-content">
            <div className="news-item">
              <h4>央行降准0.5个百分点</h4>
              <p>中国人民银行决定下调金融机构存款准备金率...</p>
            </div>
            <div className="news-item">
              <h4>新能源车补贴政策延续</h4>
              <p>财政部宣布新能源车购置补贴政策将延续至2023年底...</p>
            </div>
            <div className="news-item">
              <h4>房地产调控政策放松</h4>
              <p>多地出台房地产调控放松政策，支持合理住房需求...</p>
            </div>
          </div>
        </div>

        {/* 主力资金流向 */}
        <div className="performance-card">
          <h3>主力资金流向</h3>
          <div className="card-content">
            <div className="flow-section">
              <h4>行业资金</h4>
              <div className="flow-item">
                <span>新能源</span>
                <span className="up">+42.5亿</span>
              </div>
              <div className="flow-item">
                <span>半导体</span>
                <span className="up">+28.3亿</span>
              </div>
              <div className="flow-item">
                <span>白酒</span>
                <span className="down">-15.7亿</span>
              </div>
            </div>
            <div className="flow-section">
              <h4>北向资金</h4>
              <div className="flow-item">
                <span>净流入</span>
                <span className="up">+65.2亿</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MarketPerformancePage;